<template>
  <div class="user-information">
    <dl>
      <dt class="info-title">
        个人信息
      </dt>
      <dd v-for="(item,index) in information" :key="index" class="info-item">
        <div class="info-type">
          {{ item.type }}
        </div>
        <div class="info-content">
          {{ item.value?item.value:'未设置' }}
        </div>
      </dd>
    </dl>
    <el-button @click="handleUpdate" size="medium" type="primary">修改信息</el-button>

    <el-dialog title="修改" :visible.sync="dialogVisible" width="30%" :append-to-body='true' :close-on-click-modal="false" :show-close="false"
               :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.sex" style="width: 100%" placeholder="请选择">
            <el-option
                    v-for="item in sexOptions"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.telephone"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="form.job"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="/api/storage/anon/upload"
            name="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="imgUrl" :src="imgUrl"  style="width: 178px;height: 178px;display: block">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAction">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
  import { mapMutations, mapGetters } from 'vuex'
  import {updateUser} from '@/api/user.js'
  import {ERR_OK} from "@/api/config";
export default {
  props: {
    userinfo: {
      type: Object
    }
  },
  data () {
    return {
      information: [],
      form: {},
      imgUrl: '',
      dialogVisible: false,
      sexOptions: [
        {
          value: '男'
        },
        {
          value: '女'
        }
      ]
    }
  },
  created () {
    this.form = this.userinfo
    this.imgUrl = this.userinfo.avatar
    this.information = [
      { id: 1, type: '账户', value: this.userinfo.username },
      { id: 3, type: '电话', value: this.userinfo.telephone },
      { id: 2, type: '职位', value: this.userinfo.job },
      { id: 4, type: '性别', value: this.userinfo.sex },
      { id: 5, type: '身份', value: this.userinfo.identity }
    ]
  },
  methods: {
    handleClose() {
      this.form = {}
      this.imgUrl = ''
      this.dialogVisible = false
    },
    handleUpdate() {
      this.dialogVisible = true
    },
    submitAction() {
      updateUser(this.form).then(res => {
        this.$message.success('修改成功')
        this.setUserInfo({})
        this.setToken('')
        window.location.href = '/home'
      })
      this.dialogVisible = false
      this.handleClose()
    },
    handleAvatarSuccess(res, file) {
      if (res.code == ERR_OK) {
        this.$message.success('上传成功')
        this.form.img = res.data.url
        this.imgUrl = res.data.url
      }
    },
    // vuex
    ...mapMutations('login', {
      'setToken': 'SET_TOKEN',
      'setUserInfo': 'SET_USER_INFO'
    })
  }
}
</script>
<style lang="css">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
</style>
<style lang="stylus" scoped>
  .user-information
    .info-title
      margin-bottom: 24px;
      height: 48px;
      border-bottom: 1px solid #d0d6d9;
      line-height: 48px;
      font-size: 16px;
      font-weight: 700;
      color: #333;
    .info-item
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .info-type
        flex: 0 0 120px;
        width: 120px;
        padding: 20px 0;
        margin-right: 20px;
        font-size: 14px;
        color: #07111b;
        font-weight: 700;
        background-color: #f3f5f7;
        text-align: center;
      .info-content
        flex: 1;
        padding: 20px 0;
        border-bottom: 1px solid #d9dde1;
        font-size: 14px;
</style>
